<template>
  <Layout>
    <div class="flex flex-ac flex-col">
      <div class="top-img"></div>
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="text-align:center">
          <span>员工登录</span>
        </div>
        <div>
          <el-form :model="model" ref="model" class="flex flex-jc flex-ac" :rules="rules">
            <div class="inputs flex flex-col flex-ac flex-jc">
              <el-form-item prop="LoginName">
                <el-input
                  placeholder="请输入用户名"
                  v-model="model.LoginName"
                  @keyup.enter.native="login"
                >
                  <i slot="prefix" class="xm"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  v-model="model.pwd"
                  @keyup.enter.native="login"
                >
                  <i slot="prefix" class="mm"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input
                  class="code-input"
                  v-model="model.code"
                  @keyup.enter.native="login"
                  placeholder="请输入图形验证码"
                >
                  <i slot="prefix" class="yzm"></i>
                  <div class="flex flex-ac" @click="refreshCode" slot="append">
                    <!-- <img src alt class="code" /> -->
                    <Identify
                      :identifyCode="identifyCode"
                      :contentWidth="110"
                      :contentHeight="34"
                      class="code"
                    ></Identify>
                    <i class="sx"></i>
                  </div>
                </el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="flex flex-jc flex-ac flex-col">
          <!-- <button
            style="width:170px;margin-top:17px;margin-bottom:6px"
            class="ce-button not-hover primary"
            @click="login"
          >登录</button>-->

          <el-button
            type="primary"
            v-loading="loading"
            style="width:170px;margin-top:17px;"
            @click="login"
          >登录</el-button>
          <!-- <el-button type="primary" v-else style="width:170px;margin-top:17px;" >登录中……</el-button> -->
          <!-- <div class="mini">忘记密码</div> -->
        </div>
      </el-card>
    </div>
  </Layout>
</template>
<script>
import "@/assets/styles/index.scss";
import Layout from "./layout";
import { deepClone } from "@/utils";
import { setToken, getToken } from "@/utils/auth";
import { adminLogin } from "@/api/user";
import { validatenull } from "@/utils/validate";
import Identify from "@/components/Identify"
import md5 from 'js-md5'

const defaulModel = {
  LoginName: "",
  password: "",
  code: "",
  orgCode: "",
  phone: "",
  UserType: "USER"
};

export default {
  components: {
    Layout,
    Identify
  },
  data() {
    const validateCode = (rule, value, callback) => {
      if (validatenull(value)) {
        callback(new Error("验证码必须填写"));
      } else if (value.toLowerCase() !== this.identifyCode.toLowerCase()) {
        callback(new Error("验证码不正确,请重新输入"));
      } else {
        callback();
      }
    };
    return {
      model: deepClone(defaulModel),
      loading: false,
      infoModel: {
        userId: "",
        phone: "",
        email: ""
      },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: "",
      rules: {
        LoginName: [
          { required: true, message: "用户名必须填写", trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "密码必须填写", trigger: "blur" }
        ],
        code: [{ required: true, trigger: "blur", validator: validateCode }]
      }
    };
  },
  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    if (getToken()) this.$router.push("/home");
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    async  login() {
      var v = true;
      this.loading = true
      this.$refs.model.validate(valid => {
        v = valid;

      });

      if (v) {
        this.model.password = md5(this.model.pwd)
        var res = await adminLogin(this.model)
        if (res && res.code == 200) {
          setToken(res.data.Token)
          this.$router.push({ path: "/" });
        } else {
          this.$notify({
            title: "错误",
            type: "error",
            message: res.message
          });
        }
      }
      this.loading = false
    },
    // 重置验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    }
  }
};
</script>


<style lang="scss" scoped>
/deep/ {
  .mini {
    cursor: pointer;
    font-size: 14px;
    margin-top: 6px;
    color: rgba(153, 153, 153, 1);
  }

  .top-img {
    @include wh(320, 176);
    @include bg("~@/assets/images/login/0_2yg@2x.png");
  }

  .el-card {
    border-radius: 20px;
    box-shadow: 0px 8px 16px 0px rgba(72, 72, 72, 0.15);
    width: 544px;
    height: 335px;
    margin-bottom: 100px;
  }

  .jxsh {
    @include wh(50, 72);
    @include bgwh("~@/assets/images/login/3_3azzm@2x.png", 30, 32);
  }

  .xm {
    @include wh(50, 72);
    @include bgwh("~@/assets/images/login/3_2ayhm@2x.png", 32, 30);
  }

  .mm {
    @include wh(50, 72);
    @include bgwh("~@/assets/images/login/3_2amm@2x.png", 30, 30);
  }

  .yzm {
    @include wh(50, 72);
    @include bgwh("~@/assets/images/login/0_2yzm@2x.png", 34, 30);
  }

  .sx {
    @include wh(50, 72);
    @include bgwh("~@/assets/images/login/0_2sx@2x.png", 30, 30);
  }

  .code-input {
    position: relative;

    input {
      padding-right: 154px;
    }

    .el-input-group__append {
      position: absolute;
      right: 4px;
      top: 1px;
      bottom: 1px;
      width: 148px;
      border: 0;
      background-color: #fff;
      padding: 0;
    }

    .sx {
      width: 37px !important;
    }
  }

  input {
    border-radius: 0px !important;
  }

  .code {
    display: block;
    width: 111px;
    height: 36px;
    margin-top: -2px;
    background: #ebebeb;
  }

  .el-input {
    height: 36px;
  }

  .el-card__header {
    padding: 0;
    height: 54px !important;
    line-height: 54px;
  }

  .el-input__prefix {
    height: 36px;
  }

  .el-form-item__content {
    line-height: 36px;
  }
}

.inputs {
  padding: 5px;

  /deep/ {
    .el-form-item {
      margin-bottom: 0 !important;

      & + .el-form-item {
        margin-top: 16px;
      }
    }

    .el-input__inner {
      width: 357px;
      height: 36px;
      line-height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}

/deep/ {
  .el-card__header {
    height: 57px;
    box-sizing: border-box;
    font-size: 16px;
    color: #232e3a;
  }
}
</style>